<template>
    <div
        class="menu-container"
        :style="{
            width: containerWidthCom + 'px',
            transition: `width ${aMenuCollapseDuration} `,
            // backgroundColor: aMenuBgColor,
        }"
    >
        <div ref="topDiv">
            <slot name="top" ></slot>
        </div>
        <!-- <Logo3 :a-is-collapse="aIsCollapse"></Logo3> -->
        <div :style='`height: calc( 100% - ${topHeight} )`'>
            <ElScrollbar>
                <ElMenu
                    :collapse="aIsCollapse"
                    :background-color="aMenuBgColor"
                    :text-color="aMenuTextColor"
                    :active-text-color="aMenuActiveTextColor"
                    
                    @open="handleOpen"
                    @close="handleClose"
                    style="border: none"
                >
                    <MyMenuItem
                        v-for="(item, _index) in aMyMenuItemArray"
                        :menu-item-obj="item"
                        :base-path="aBasePath"
                    ></MyMenuItem>
                </ElMenu>
            </ElScrollbar>
        </div>
    </div>
</template>
<script setup lang="ts">
import MyMenuItem from "./my_menu_item.vue";
import { PropType, computed, onMounted, ref } from "vue";
import { TypeMyMenuItem } from "./my_menu_type";
import { NslUtils } from "@/utils/NslUtil";
import {ElScrollbar,ElMenu} from 'element-plus'

const topHeight=ref()
onMounted(() => {
    // console.log('in mymenu index mounted');
    console.log('topDiv',topDiv);
    console.log('getComputedStyle(topDiv.value!).height',getComputedStyle(topDiv.value!).height);
    topHeight.value=getComputedStyle(topDiv.value!).height;
    
});

const topDiv=ref<HTMLDivElement>();



type TypeStringOrNumber = number | string;

// style="width:100%;height: 100%;"
//#region defineXxx
defineOptions({
    name: "my_menu",
});

const props = defineProps({
    aMyMenuItemArray: {
        type: Array as PropType<TypeMyMenuItem[]>,
        required: true,
    },
    aIsCollapse: {
        type: Boolean,
        default: false,
    },
    aBasePath: {
        type: String,
        default: "/",
    },
    aExpendWidth: {
        type: Number || (String as PropType<TypeStringOrNumber>),
        default: "100%",
    },
    aCollapseWidth: {
        type: String,
        default: "64",
    },
    aMenuBgColor: {
        type: String,
        // default: '#304156',
        default: "green",
    },
    aMenuTextColor: {
        type: String,
        default: "#bfcbd9",
    },
    aMenuActiveTextColor: {
        type: String,
        default: "#409eff",
    },
    aMenuCollapseDuration: {
        type: String,
        default: "2.5s",
    },
    // propC:{
    //     type:String as PropType<Object>,
    //     required:true
    // },
});

const emit = defineEmits<{
    event1: [para1: number, para2: string];
    event2: [para1: number, para2: string];
}>();
//#endregion

const containerWidthCom = computed(() => {
    return props.aIsCollapse ? props.aCollapseWidth : props.aExpendWidth;
});

const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
};
</script>
<style lang="scss" scoped>
.menu-container {
    height: 100%;
    // transition: width 1.5s;
    overflow: hidden;
}
</style>
